import React from 'react';
import { Input, Icon, Form } from 'antd';

const InputSearch = Input.Search;

@Form.create()
class QueryExtra extends React.Component {

  componentDidMount() {
    const { getFormThis } = this.props;
    if (getFormThis) getFormThis(this, 'queryExtra');
  }

  handleSearch = value => {
    const { onSearch } = this.props;
    if (onSearch instanceof Function) onSearch(value);
  }

  handleReset = () => {
    const { form } = this.props;
    form.resetFields();
  }

  handleSubmit = e => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, handleParamsChange } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const { searchName = '' } = values;
      const param = { searchName: searchName.trim() }
      if (handleParamsChange) handleParamsChange(param);
    });
  }

  render() {
    const { visible, handleFilterVisible, form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form layout='inline'>
        <Form.Item
          label=""
          labelCol={{ span: 1 }}
          wrapperCol={{ span: 23 }}
          style={{ marginRight: 0 }}
        >
          {getFieldDecorator('searchName', {
            initialValue: '',
          })(
            <InputSearch
              placeholder="请输入流程名称"
              onSearch={this.handleSearch}
              className='input__search'
            />
          )}
        </Form.Item>
        <Form.Item style={{ marginRight: 0 }}>
          <span className={`a__link advanced__filter ${visible && 'advanced__filter__up'}`}>
            <span onClick={handleFilterVisible} style={{ cursor: 'pointer' }}>
              <span>{visible ? '收起' : '高级筛选'}</span>
              {visible ? <Icon type="up" /> : <Icon type="down" />}
            </span>
          </span>
        </Form.Item>
      </Form>
    );
  }
}
export default QueryExtra;